<template>
  <div class="accredit-container">
    <el-row :gutter="0">
      <el-col :xl="6" :lg="6" :md="4" :sm="0" :xs="0">
        <div class="left-container"></div>
      </el-col>
      <el-col :xl="18" :lg="18" :md="24" :sm="24" :xs="24">
        <el-row class="right-container">
          <el-col
            :xl="12"
            :lg="12"
            :md="16"
            :sm="16"
            :xs="24"
            class="header-container"
          >
            <a :href="getFullPath('/#/shop')">
              <img
                style="width: 40px; height: 40px"
                src="https://cdn.cnbj1.fds.api.mi-img.com/s02.mifile.cn/assets/static/image/logo-mi2.png"
                alt="mi-logo"
              />
            </a>
            <div class="mi-title">小米账号</div>
          </el-col>
          <el-col
            :xl="12"
            :lg="12"
            :md="16"
            :sm="16"
            :xs="24"
            class="header-navlist"
          >
            <a
              v-for="row of navList"
              :key="row.id"
              :href="getFullPath(row.url)"
            >
              <span class="header-nav-item">{{ row.name }}</span>
            </a>
            <span class="header-nav-item">|</span>
            <span class="header-nav-item">
              <el-dropdown>
                <span class="el-dropdown-link">
                  语言
                  <el-icon class="el-icon--right">
                    <CaretBottom />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>简体中文</el-dropdown-item>
                    <el-dropdown-item>繁体中文</el-dropdown-item>
                    <el-dropdown-item>English</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </span>
          </el-col>
          <el-col
            :xl="11"
            :lg="11"
            :md="12"
            :sm="16"
            :xs="24"
            :offset="7"
            :style="[
              type === 'login' ? { height: '350px' } : { height: '400px' },
            ]"
            class="form-container"
          >
            <div class="login-form" v-if="type === 'login'">
              <Login />
            </div>
            <div class="register-form" v-else>
              <Register />
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
  import { defineComponent, computed } from "vue";
  import { useRoute } from "vue-router";
  import { getFullPath } from "@/utils/path";

  import Login from "./components/Login.vue";
  import Register from "./components/Register.vue";

  type NavList = Array<{
    id: number;
    name: string;
    url: string;
  }>;

  export default defineComponent({
    name: "Accredit",
    components: {
      Login,
      Register,
    },
    setup() {
      const navList: NavList = [
        {
          id: 1,
          name: "用户协议",
          url: "https://static.account.xiaomi.com/html/agreement/user/zh_CN.html",
        },
        {
          id: 2,
          name: "隐私政策",
          url: "https://privacy.mi.com/miaccount/zh_CN/",
        },
        {
          id: 3,
          name: "帮助中心",
          url: "https://cn.account.xiaomi.com/helpcenter?_locale=zh_CN",
        },
      ];

      const route = useRoute();
      // 获取路由参数,计算type变化
      const type = computed(() => {
        return route.query.type;
      });

      onMounted(() => {
        watchEffect(() => {
          if (type.value === "register") {
            document.title = "小米账号 - 注册";
          }
        });
      });

      return {
        type,
        navList,
        getFullPath,
      };
    },
  });
</script>

<style lang="scss" scoped>
  @use "@/styles/variable" as *;

  .accredit-container {
    width: 100%;
    height: 100vh;
  }

  .left-container {
    height: 100vh;
    background-image: url(https://cdn.web-global.fds.api.mi-img.com/mcfe--mi-account/static/static/media/banner.92c693b4..jpg);
    background-size: cover;
    background-position: center;
  }

  .right-container {
    width: 100%;
    height: 100vh;
    padding: 20px;
  }

  .header-container {
    height: 30px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: left;
  }

  .mi-title {
    font-size: 26px;
    font-weight: 400;
    height: 40px;
    line-height: 40px;
    margin-left: 10px;
  }

  .header-navlist {
    height: 30px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: right;

    a {
      text-decoration: none;
    }
  }

  .header-nav-item {
    color: #838383;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    height: 40px;
    line-height: 40px;
    margin-left: 10px;
    margin-right: 10px;
  }

  .header-nav-item:deep(.el-dropdown-link) {
    margin: 10px;
    cursor: pointer;
  }

  :deep(.el-dropdown-item) {
    color: #838383;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    height: 40px;
    line-height: 40px;
  }

  .form-container {
    width: 100%;
    border-radius: 5px;
    box-shadow: 0 20px 50px 0 hsla(0, 0%, 64%, 0.1);
    margin: 0 auto 80px;
    padding: 45px 45px;
  }
</style>
